<template>
  <!-- tab -->
  <ul class='tabbar' :style="showLeft?'left: 65%;':'left: 74%;'">
    <!-- 设备按钮 -->
    <li class='tabbar-item'
        v-for="item in tabList"
        :key="item.icon"
        @click='changeType(item.type)'
        :class='{ "add-animate": tabValue === item.type, "remove-animate": oldTabValue === item.type }'>
      >
      <div class='child child-1'>
        <div class='tabbar-icon'>
          <img :src='item.icon' v-show='tabValue != item.type'>
        </div>
        <div class='tabbar-label'>
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class='child child-4'>
        <div class='tabbar-icon'>
          <img :src='item.iconOn' v-show='tabValue == item.type'>
        </div>
        <div class='tabbar-label'>
          <span>{{item.name}}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>

import {mutations} from "../../work-point.store";

export default {

  props: ['tabValue'],
  data() {
    return {
      oldTabValue: undefined,
      tabList: [
        {
          name: '全部',
          icon: require('../imgs/all.png'),
          iconOn: require('../imgs/allzaixian.png'),
          type: 0
        },
        {
          name: '深部位移',
          icon: require('../imgs/shenbu.png'),
          iconOn: require('../imgs/shenbuzaixian.png'),
          type: 1
        },
        {
          name: '地表位移',
          icon: require('../imgs/dibiao.png'),
          iconOn: require('../imgs/dibiaozaixian.png'),
          type: 2
        },
        {
          name: '拉线位移',
          icon: require('../imgs/laxian.png'),
          iconOn: require('../imgs/laxianzaixian.png'),
          type: 3
        },
        {
          name: '降雨',
          icon: require('../imgs/jiangyu.png'),
          iconOn: require('../imgs/jiangyuzaixian.png'),
          type: 4
        },
        {
          name: '地下水位',
          icon: require('../imgs/dixiashuiwei.png'),
          iconOn: require('../imgs/dixiashuiweizaixian.png'),
          type: 5
        },
        {
          name: '锚索应力',
          icon: require('../imgs/maosuo.png'),
          iconOn: require('../imgs/maosuozaixian.png'),
          type: 6
        },
        {
          name: '静力水准',
          icon: require('../imgs/jingli.png'),
          iconOn: require('../imgs/jinglizaixian.png'),
          type: 7
        },
        {
          name: '倾角仪',
          icon: require('../imgs/qingjiao.png'),
          iconOn: require('../imgs/qingjiaoZaiXian.png'),
          type: 8
        },
        {
          name: '温湿度',
          icon: require('../imgs/wensidu.png'),
          iconOn: require('../imgs/wensiduzaixian.png'),
          type: 10
        },
        {
          name: '风速风向',
          icon: require('../imgs/fengshu.png'),
          iconOn: require('../imgs/fengshuzaixian.png'),
          type: 11
        },
        {
          name: '应力应变',
          icon: require('../imgs/yingli.png'),
          iconOn: require('../imgs/yinglizaixian.png'),
          type: 12
        },
        {
          name: '振动',
          icon: require('../imgs/zhendong.png'),
          iconOn: require('../imgs/zhendongzaixian.png'),
          type: 13
        },
      ],
    }
  },
  computed: {
    showLeft() {
      return this.$route.params.showLeft === '1'
    },
  },
  watch: {
    tabValue(value, oldVlaue) {
      this.oldTabValue = oldVlaue
    }
  },
  methods: {
    changeType(val) {
      mutations.setState({key: "isMarker", value: false});
      this.$emit('changeTypes', val)
    },
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
  .tabbar {
    display: inline-flex;
    position: fixed;
    width: 100% !important;
    transform: translateX(-50%);
    bottom: 0;
    height: 10%;
  }

  .tabbar-item-text {
    cursor: pointer;
    width: 3.75rem /* 60/16 */;
    height: 84%;
    display: block;
    font-size: 0;
    color: #f6f6f6;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform-style: preserve-3d;

    .textDiv {
      color: #00BFFF;
      font-weight: 600;
    }

    div {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 420px;
      line-height: 80px;
      color: white;

      span {

        display: block;
        font-size: 16px;
      }
    }

    &:not(:last-child) {
      margin-right: 1.5rem /* 24/16 */;
    }
  }

  .tabbar-item {
    width: 3.75rem /* 60/16 */;
    height: 84%;
    display: block;
    font-size: 0;
    color: #f6f6f6;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* perspective: 30px; */
    transform-style: preserve-3d;

    &:not(:last-child) {
      margin-right: 1.5rem /* 24/16 */;
    }
  }

  .add-animate {
    transition: all 1s;
    animation-name: rotateDown;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }

  .remove-animate {
    transition: all 1s;
    animation-name: rotateUp;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }

  @keyframes rotateUp {
    0% {
      transform: rotateX(-90deg);
    }
    70% {
      transform: rotateX(10deg);
    }
    100% {
      transform: rotateX(0);
    }
  }

  @keyframes rotateDown {
    0% {
      transform: rotateX(0);
    }
    50% {
      transform: rotateX(-100deg);
    }
    100% {
      transform: rotateX(-90deg);
    }
  }

  .child {
    position: absolute;
    top: 0;
    cursor: pointer;
  }

  /* 前面 */
  .child-1 {
    width: 100%;
    height: 100%;
    transform: translateZ(50%);
    /* z-index: 1000; */
  }

  /* 后面 */
  .child-2 {
    width: 100%;
    height: 100%;
    transform: translateZ(-50%);
  }

  /* 上面 */
  .child-3 {
    width: 100%;
    height: 100%;
    transform: translateY(50%) rotateX(90deg);
    /* border: 1px #000 solid; */
  }

  /* 下面 */
  .child-4 {
    width: 100%;
    height: 100%;
    transform: translateY(-50%) rotateX(90deg);
    /* border: 1px #000 solid; */
  }

  /* 左面 */
  .child-5 {
    width: 100%;
    height: 100%;
    transform: translateX(50%) rotateY(90deg);
    /* border: 1px #000 solid; */
  }

  /* 右面 */
  .child-6 {
    width: 100%;
    height: 100%;
    transform: translateX(-50%) rotateY(90deg);
    /* border: 1px #000 solid; */
  }

  .tabbar-icon {
    display: inline-block;
    width: 100%;
    margin: 0 0 8%;
  }

  .tabbar-icon img {
    width: 90%;
  }

  .tabbar-label {
    text-align: center;
    color: #f6f6f6;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
    /* padding-bottom: 5px; */
  }
</style>
